/**
 * Logic for ideaList.html
 */

//refresh == 0: no complete refresh
//refresh == 1: complete refresh
function buildIdeaList(data, refresh){
	if(refresh==0){
		$("#ideaList").empty();
	}else{
		var parent = $("#ideaList").parent();
		$("#ideaList").remove();
		parent.append("<div id='ideaList' class='ui-widget-content ui-corner-bottom'></div>");
	}	

	$.each(data.ideas, function(i,idea){
		var newItem = '<h3><a href="#">' + idea.title + '</a></h3>';
		newItem += '<div>';

		// description
		newItem += '<div class="ideaDescription"><p>' + idea.description + '</p></div>';

		// creator info
		newItem += '<div class="ideaCreator">';
		newItem += '<p>' + idea.name + '</p>';
		
		if(idea.imageUrl!=''){
			newItem += '<img src=' + idea.imageUrl + '>';
		}
		
		newItem += '<p><b>' + idea.status + '</b></p>';
		
		newItem += '</div>';

		// like section
		newItem += '<div ideaId="' + idea.id + '" class="ideaButtons">';
		newItem += '<a href="#" class="ideaLikeButton ui-state-default ui-corner-all" ideaId="';
		newItem += idea.id;
		newItem += '" ideaAlreadyLiked="' + idea.alreadyLiked + '">';

		var buttonText = "Begeistert mich";
		var buttonIcon = "ui-icon-star";
		if(idea.alreadyLiked == 'X'){
			var buttonText = "Begeistert mich nicht mehr";
			var buttonIcon = "ui-icon-close";
		}
		newItem += '<span class="ui-icon ' + buttonIcon + '"></span>';
		newItem += '<span class="buttonText">'+ buttonText + '</span></a>';
		newItem += '<span class="ideaLikeString" ideaId="' + idea.id + '">'; 
		newItem += idea.likeString + '</span>';
		newItem += '</div>';

		newItem += '</div>';
		$("#ideaList").append(newItem);
	});

	$( "#ideaList" ).accordion({
		autoHeight: false,
		navigation: true
	});

	$(".ideaLikeButton").click(function(ev){
		var ideaId = $(this).parent().attr("ideaId"); 
		var action = "likeIdea";
		if($(this).attr("ideaAlreadyLiked") == "X"){
			action = "unLikeIdea";
		}

		$.post("/ideas", {action: action,
			ideaId: ideaId
		}, function(data){

			$('span[ideaId="' + data.ideaId + '"]').empty().append(data.likeString);

			if(data.alreadyLiked == ' '){
				$('a[ideaId="' + data.ideaId + '"] span.buttonText').empty().append("Begeistert mich");
				$('a[ideaId="' + data.ideaId + '"] span.ui-icon').removeClass("ui-icon-close").addClass("ui-icon-star");
				$('a[ideaId="' + data.ideaId + '"]').attr("ideaAlreadyLiked", " ");
			}else{
				$('a[ideaId="' + data.ideaId + '"] span.buttonText').empty().append("Begeistert mich nicht mehr");
				$('a[ideaId="' + data.ideaId + '"] span.ui-icon').removeClass("ui-icon-star").addClass("ui-icon-close");
				$('a[ideaId="' + data.ideaId + '"]').attr("ideaAlreadyLiked", "X");
			}
		}, "json");
	});

};

function afterFbLogin(response){
	if (response.status === 'connected') {
		var uid = response.authResponse.userID;
		var accessToken = response.authResponse.accessToken;

		$('#loginInfo').attr('accessToken', accessToken);
		$('#loginInfo').attr('userId', uid);

		$("#ideaList").empty().append("...Ideen werden geladen...");

		$.getJSON("/ideas", {
			action: "authorizeViaFacebook",
			accessToken: $('#loginInfo').attr('accessToken')
		}, function(data){         
			buildIdeaList(data, 0);

			if(data.isAuthenticated==" "){
				$("#ideaList").empty().append("Ideen können nicht geladen werden");

				var errorMsg = "<p>Du bist noch nicht für diese Webseite freigeschaltet. Damit nicht einfach jeder mit einem" +
				"facebook account auf die Seite zugreifen kann, möchten wir es nur bestimmten Leuten erlauben." +
				"Wir haben versucht, als Anfang alle Leute aus der Gemeinde, deren facebook IDs wir kennen, einzufügen." +
				"Falls Du nun diese Meldung siehst, schreib' bitte eine Mail an christian.trebing@gmx.de so da�" +
				"ich Dich aufnehmen kann</p>";

				$("#errorText").empty().append(errorMsg);
				$("#errorDialog").dialog("open");
			}

		});

		$('#loginInfo').empty();

		FB.api('/me', function(user) {
			if (user) {
				var loginInfo = "<p>"+user.name+"</p>";
				loginInfo += "<img src=https://graph.facebook.com/"+user.id+"/picture />";
				$('#loginInfo').append(loginInfo);
			}
		});
	} else if (response.status === 'not_authorized') {
		// the user is logged in to Facebook, 
		//but not connected to the app

		var errorMsg = "<p>Du bist bei facebook eingeloggt, aber hast diese Webseite noch nicht freigeschaltet.</p>";
		errorMsg += "<p>Bitte benutz' den Login-Button oben ";
		errorMsg += "rechts und bestätige, daß diese Webseite Deine email-Adresse lesen darf.</p>";

		$("#errorText").empty().append(errorMsg);
		$("#errorDialog").dialog("open");
		$("#ideaList").empty().append("Ideen k�nnen nicht geladen werden");
	} else {
		// the user isn't even logged in to Facebook.

//		var errorMsg = "<p>Diese Webseite benutzt Dein Konto bei facebook, um Dich zu authentifizieren.</p>";
//		errorMsg += "<p>Aktuell bist Du nicht bei facebook eingeloggt. Bitte benutz' den Login-Button oben ";
//		errorMsg += "rechts, um Dich einzuloggen.</p>";
//
//		$("#errorText").empty().append(errorMsg);
//		$("#errorDialog").dialog("open");
	}	
};

function emailLogin(){
	$.getJSON("/ideas", {action: "authorizeViaEmail",
		email: $("#emailForm").val(),
		password: $("#passwordForm").val()
	}, function(data){
		if(data.isAuthenticated==" "){
			$("#ideaList").empty().append("Ideen können nicht geladen werden");

			var errorMsg = "<p>Du hast das falsche Passwort eingegeben</p>";

			$("#errorText").empty().append(errorMsg);
			$("#errorDialog").dialog("open");
		}else{
			$("#ideaList").empty().append("...Ideen werden geladen...");
			buildIdeaList(data, 0);

			$('#loginInfo').empty();
			
			var loginInfo = "<p>eingeloggt als</p>";
			loginInfo += "<p>"+data.email+"</p>";
			$('#loginInfo').append(loginInfo);
		}
	});
}

window.fbAsyncInit = function() {
	FB.init({
		appId      : '313149895398128', // App ID
		channelUrl : 'http://gemeinde-in-aktion.appspot.com/channel.html', // Channel File
		status     : true, // check login status
		cookie     : true, // enable cookies to allow the server to access the session
		xfbml      : true  // parse XFBML
	});

	FB.getLoginStatus(function(response) {
		afterFbLogin(response);
	});
};

//Load the SDK Asynchronously
(function(d){
	var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
	js = d.createElement('script'); js.id = id; js.async = true;
	js.src = "//connect.facebook.net/en_US/all.js";
	d.getElementsByTagName('head')[0].appendChild(js);
}(document));

$(document).ready(function(){

	$("#errorDialog").dialog({
		autoOpen: false,
		modal: true,
		buttons: {
			Ok: function(){
				$( this ).dialog( "close" );
			}
		} 
	});

	$("#addDialog").dialog({
		autoOpen: false,
		modal: true,
		width: 560,
		buttons: {
			"Idee hinzufügen": function(){
				$.post("/ideas", {action: "addIdea",
					title: $("#titleForm").val(),
					description: $("#descriptionForm").val()
				}, function(data){
					buildIdeaList(data, 1);
					$("#titleForm").val("");
					$("#descriptionForm").val("");
				}, "json");

				$( this ).dialog( "close" );
			},
			Cancel: function(){
				$( this ).dialog( "close" );
			}
		},
		close: function(){
			$( this ).dialog( "close" );
		} 
	});

	$("#addIdea").click(function(ev){
		$( "#addDialog" ).dialog( "open" );
	}).hover(
			function(){ 
				$(this).addClass("ui-state-hover"); 
			},
			function(){ 
				$(this).removeClass("ui-state-hover"); 
			}
	);

	$("#fbLogin").click(function(ev){
		FB.login(function(response) {
			afterFbLogin(response);
		}, {scope: 'email'});
	}).hover(
			function(){ 
				$(this).addClass("ui-state-hover"); 
			},
			function(){ 
				$(this).removeClass("ui-state-hover"); 
			}
	);

	$("#emailLoginDialog").dialog({
		autoOpen: false,
		modal: true,
		width: 560,
		buttons: {
			"Login": function(){
				emailLogin();
				$( this ).dialog( "close" );
			},
			Cancel: function(){
				$( this ).dialog( "close" );
			}
		},
		close: function(){
			$( this ).dialog( "close" );
		} 
	});

	$("#emailLogin").click(function(ev){
		$( "#emailLoginDialog" ).dialog( "open" );
	}).hover(
			function(){ 
				$(this).addClass("ui-state-hover"); 
			},
			function(){ 
				$(this).removeClass("ui-state-hover"); 
			}
	);

});